<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>乔安科技</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="Description" content="乔安科技" />
    <meta name="Keywords" content="乔安科技" />
    <meta name="x5-orientation" content="portrait" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,viewport-fit=cover,user-scalable=no"
    />

    <script src="./js/vue.js"></script>
    <!-- 引入vant样式文件和js文件 -->
    <link rel="stylesheet" href="./css/element.css" />
    <script src="./js/element.js"></script>

    <script src="./js/data.js"></script>
    <script src="./js/methods.js"></script>

    <script>
      // 禁止右键
      document.addEventListener(
        "contextmenu",
        function (e) {
          e.preventDefault();
        },
        false
      );
      // 禁止f12和Ctrl 键盘事件
      document.addEventListener("keydown", function (e) {
        if (e.ctrlKey || e.keyCode) {
          e.stopPropagation();
          e.preventDefault();
        }
      });
    </script>

    <link rel="stylesheet" href="./css/rest.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="app">
      <div class="title">
        <p>渐变颜色</p>
      </div>
      <div class="introduce" v-if="num==0">
        <div class="introduceTxt">
          <p>你经常为你的UI寻找好看的背景渐变吗?</p>
          <p>一个集合180种免费的线性渐变网站,可以任何网站使用</p>
          <p>
            您不仅可以复制渐变的原生CSS颜色代码,还可以查看下载每个优质的渐变图片
          </p>
        </div>
      </div>

      <div
        class="main"
        :style="num==0?'margin-top: 220px;':'margin-top: 50px;'"
      >
        <div class="listBox">
          <div class="liBox" v-for="(item,index) in data[num]" :key="index">
            <div class="Co">
              <div class="liT">
                <p>{{item.name}}</p>
                <!-- <i class="el-icon-download download"></i> -->
              </div>
              <div
                :class="`colorBox colorBox${index}` "
                ref="colorBox"
                :style="item.background"
                @click="scaleFun(item,index)"
              ></div>
              <div class="copyBox" @click="copyFun(item.background)">
                <p>Copy Css</p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageSize"
            :page-size="60"
            layout="total, pager"
            :total="240"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      let app = new Vue({
        el: "#app",
        data: {
          ...datas,
        },
        methods: {
          ...methods,
        },
        created: function () {
          this.init_product();
        },
      });
    </script>
  </body>
</html>
